<template>
  <div>
    <div>
      <div class="handle-box">
        <el-select
          v-model="pagination.type"
          placeholder="类型"
          class="handle-select mrb10"
        >
          <el-option key="0" label="青出于蓝" :value="0"></el-option>
          <el-option key="1" label="友情链接" :value="1"></el-option>
        </el-select>
        <el-input
          v-model="pagination.name"
          placeholder="网站名称"
          class="handle-input mrb10"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getFriends()">搜索</el-button>
        <el-button type="danger" @click="clearSearch()">清除参数</el-button>
      </div>
      <el-table
        :data="friends"
        border
        class="table"
        header-cell-class-name="table-header"
      >
        <el-table-column
          prop="name"
          label="网站名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="url"
          label="网站域名"
          align="center"
          width="300px"
        ></el-table-column>
        <el-table-column label="网站封面" align="center">
          <template slot-scope="scope">
            <el-image
              lazy
              class="table-td-thumb"
              :src="scope.row.cover"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="introduction"
          label="网站简介"
          align="center"
          width="500px"
        ></el-table-column>
        <el-table-column label="友链类型" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type === '0'" disable-transitions>青出于蓝</el-tag>
            <el-tag type="success" v-if="scope.row.type === '1'" disable-transitions>友情链接</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === false ? 'danger' : 'success'" disable-transitions>
              {{ scope.row.status === false ? "未通过" : "通过" }}
            </el-tag>
            <el-switch
              @click.native="changeStatus(scope.row)"
              v-model="scope.row.status"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="申请时间"
          align="center"
          width="160px"
        ></el-table-column>
        <el-table-column label="操作" width="270" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="pagination.current"
          :page-size="pagination.size"
          :total="pagination.total"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog
      title="友链详情"
      :visible.sync="editVisible"
      width="30%"
      :append-to-body="true"
      destroy-on-close
      center
    >
      <div class="myCenter">
        <el-form
          ref="form"
          label-width="75px"
        >
          <el-form-item label="网站名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="网站域名">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="网站简介">
            <el-input v-model="form.introduction"></el-input>
          </el-form-item>
          <el-form-item label="友链类型">
            <el-select v-model="form.type" placeholder="请选择友链类型">
              <el-option label="青出于蓝" value="0"></el-option>
              <el-option label="友情链接" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        type: "",
        name: ""
      },
      form: {
        id: null,
        name: "",
        url: "",
        introduction: "",
        type: ""
      },
      friends: [],
      editVisible: false
    };
  },

  computed: {},

  watch: {},

  created() {
    this.getFriends();
  },

  mounted() {
  },

  methods: {
    clearSearch() {
      this.pagination = {
        current: 1,
        size: 10,
        total: 0,
        type: "",
        name: ""
      };
      this.getFriends();
    },
    getFriends() {
      this.$createHttp.friendPage(this.pagination).then((res) => {
        if (res.code === 200) {
          this.friends = res.data.records;
          this.pagination.total = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    changeStatus(friend) {
      let id = friend.id;
      let status = friend.status;
      this.$createHttp.changeFriendStatus(id, status).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功！",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    handleEdit(id) {
      this.$createHttp.friendInfo(id).then((res) => {
        if (res.code === 200) {
          this.form.id = res.data.id;
          this.form.name = res.data.name;
          this.form.url = res.data.url;
          this.form.introduction = res.data.introduction;
          this.form.type = res.data.type;
          this.editVisible = true;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    //保存修改
    saveEdit() {
      this.$createHttp.updateFriend(this.form).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.editVisible = false
          setTimeout(() => {
            this.getFriends()
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    handleDelete(id) {
      this.$confirm("此操作将删除该友链, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$createHttp.deleteFriend(id).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            setTimeout(() => {
              this.getFriends();
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      });
    },
    handlePageChange(val) {
      this.pagination.current = val;
      this.getFriends();
    },

  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 160px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mrb10 {
  margin-right: 10px;
  margin-bottom: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.pagination {
  margin: 20px 0;
  text-align: right;
}
</style>
